<template>
  <div class="active-content" v-loading="fullscreenLoading" element-loading-text="加载中">
    <el-row>
      <el-col :span="24" style="margin-left: 5%;font-weight: bold;font-size: 12px;color: #999999;padding-bottom:20px;">
        活动期间，限时特惠，活动截止至2020-12-31结束。
      </el-col>
      <!--支付套餐-->
      <el-col :span="24">
        <div class="vip-package">
          <!-- 单次购买套餐-->
          <div class="vip-a" v-for="(item, i) in singleInfo">
            <div :class="[vip_on == item.vipId && vipType == 1?'vip-p vip-on':'vip-p']" data-vipType="1" :data-vip='item.vipId' :data-price='item.vipPrice' @click="chooseVip($event)">
              <div class="package-name">
                {{item.vipname}}
              </div>
              <div class="price-info">
                <div class="price-unit">￥</div>
                <div class="price">{{item.vipPrice}}</div>
              </div>
              <div class="package-remake">
                {{item.vipRemke}}
              </div>
              <i class="el-icon-my-vip-choose" :class="[vip_on == item.vipId && vipType == 1?'':'icon-hide']" style=""></i>
            </div>
          </div>
          <!-- vip套餐-->
          <div class="vip-a" v-for="(item, i) in vipInfo">
            <div :class="[vip_on == item.vipId && vipType == 2?'vip-p vip-on':'vip-p']" data-vipType="2"  :data-vip='item.vipId' :data-price='item.vipPrice' @click="chooseVip($event)">
              <div class="package-name">
                {{item.vipname}}
              </div>
              <div class="price-info">
                <div class="price-unit">￥</div>
                <div class="price">{{item.vipPrice}}</div>
              </div>
              <div class="package-remake">
                {{item.vipRemke}}
              </div>
              <i class="el-icon-my-vip-choose" :class="[vip_on == item.vipId && vipType == 2?'':'icon-hide']" style=""></i>
            </div>
          </div>
        </div>
      </el-col>

      <!--支付二维码-->
      <el-col :span="24" class="pay-type">
        <el-tabs v-if="!payResult.show" tab-position="left" v-model="payTypeName" @tab-click="payTypeClick" class="payTypeTba">
          <el-tab-pane name="wechatPay">
            <div slot="label" class="pay-type-title"><i class="el-icon-pay-wechat"></i><span>微信支付</span></div>
            <div class="pay-qr">
              <div class="qr-code">
                <div class="qr-code-info" v-loading="payImgLoading">
                  <div class="qr-code-bor">
                    <div class="qr-code-img">
                      <img :src="wechat">
                    </div>
                  </div>
                </div>
              </div>
              <!--应付金额-->
              <div class="pay-info">
                <span>微信扫码，支付</span>
                <span class="pay-price">{{payPrice}}</span>
                <span>元</span>
                <div class="pay-user">
                  <span>账号：</span>
                  <span>{{sysUserName}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane name="aliPay">
            <div slot="label" class="pay-type-title"><i class="el-icon-pay-ali"></i><span>支付宝支付</span></div>
            <div class="pay-qr">
              <div class="qr-code">
                <div class="qr-code-info" v-loading="payImgLoading">
                  <div class="qr-code-bor">
                    <div class="qr-code-img">
                      <img :src="ali">
                    </div>
                  </div>
                  <!--                <div class="qr-code-text">支付宝支付</div>-->
                </div>
              </div>
              <!--应付金额-->
              <div class="pay-info">
                <span>支付宝扫码，支付</span>
                <span class="pay-price">{{payPrice}}</span>
                <span>元</span>
                <div class="pay-user">
                  <span>账号：</span>
                  <span>{{sysUserName}}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div v-else class="pay-result">
          <div class="result-title">
            <img :src="paySucc">
            <div class="result-title-text">支付成功</div>
          </div>
          <div class="result-content">
            <div class="result-content-text">支付金额：<span>{{payResult.amount}}元</span></div>
            <div class="result-content-text">订单编号：{{payResult.orderNo}}</div>
            <div class="result-content-text">订单描述：<span v-html="payResult.desc"></span></div>
          </div>
        </div>
      </el-col>
      <!--vip套餐功能说明-->
      <el-col :span="24">
        <div class="pay-vip-desc">
          <span class="vip-desc-sp1">VIP 会员:</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>批量导出</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>合并打印</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>邮件筛选</span>
          <span class="vip-desc-sp2"><i class="el-icon-my-vip-desc"></i>智能分类</span>
        </div>
      </el-col>
      <!--套餐购买说明-->
<!--      <el-col :span="24">-->
<!--        <div class="vip_explain">-->
<!--          <span class="vip-desc-sp1">说明:</span>-->
<!--          <div v-for="(item, i) in explainInfo" style="display: inline-block;">-->
<!--            <span class="vip-desc-sp2">{{i+1}}.{{item.baseName}}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>
  </div>
</template>
<script>
  import * as commonApi from "api/common";
  import {websockUrl} from 'config/index.js'
  import paySucc from "../../assets/img/pay-succ.png";
  import {baseUrl} from 'config/index.js'

  export default {
    data() {
      return {
        websockUrl: websockUrl, //websock地址
        websock: null, //websock对象 实现数据推送
        sysUserName: '',
        sysUserImg: null, //用户头像
        fullscreenLoading: true, //整体加载
        payImgLoading: true,  //二维码加载
        payTypeName: 'wechatPay', //支付方式选择tab
        userId: '',
        userVip:"",
        wechat: null, //微信支付二维码
        ali: null, //支付宝支付二维码
        paySucc: paySucc, //支付成功图标
        vip_on: '1', //vip套餐选择 状态值
        vipType: '2', //vip套餐类型 状态值 1单次购买 2vip购买
        explainInfo: [],
        vipInfo: [],
        singleInfo: [], //单次购买套餐信息
        payPrice: '0',
        currentPage: true, //true 为当前页面，false为离开当前页，用作于websock的判断
        payResult: { //支付结果
          show: false,
          amount: 0,
          orderNo: '',
          goodsName: '',//购买商品
          goodsCode: '', //购买类型 单次，vip
          desc: '',
        },
      };
    },
    created() {
      var user = sessionStorage.getItem("user");
      user = JSON.parse(user);
      this.websockUrl = this.websockUrl + "/PC_" + user.userId
      this.sysUserName = user.name || "";
      this.userId = user.userId || "";
      this.findUserInfo(1,user);
      this.initWebSocket()
    },
    mounted() {
      this.getVipInfo(2)
    },
    destroyed() {
      this.findUserInfo(2);
      this.currentPage = false
      this.websock.close() //离开路由之后断开websocket连接
      console.log('----------vip destroyed-------------')
    },
    methods: {
      payTypeClick(tab, event) {
        // console.log(tab, event);
        // console.log(tab.name)
      },
      chooseVip(e){ //选择vip套餐
        let type = e.currentTarget.dataset.viptype
        this.vipType = type
        this.vip_on = e.currentTarget.dataset.vip
        this.payPrice = e.currentTarget.dataset.price
        this.payResult.show = false //关闭支付成功信息模块
        if (type == 1){ //单次购买
          this.getPayImg(1)
        } else { //vip购买
          this.getPayImg(2)
        }
      },
      judgeDateDays(dateTime){//判断日期与当前日期的天数差
        // 指定日期和时间
        var EndTime = new Date(dateTime);
        // 当前系统时间
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        // var h = Math.floor(t / 1000 / 60 / 60 % 24);
        // var m = Math.floor(t / 1000 / 60 % 60);
        // var s = Math.floor(t / 1000 % 60);
        // var html = d + " 天" + h + " 时" + m + " 分" + s + " 秒";
        return d;
      },
      getPayImg(type){ //获取支付二维码
        this.payImgLoading = true
        this.wechat = null
        this.ali = null
        commonApi.getPayImage(this.userId, this.vip_on, type).then(res => {
          let {data} = res
          if (data.status === 200){
            if (data.data != null && data.data != ''){
              this.wechat = data.data.wxPay
              this.ali = data.data.aliPay
              this.payImgLoading = false
            }
            // else {
            //   this.wechat = wechat
            // }
          }
        })
      },
      findUserInfo(type, user){
        if (type === 1) { //初始化用户信息
          commonApi.findUser(user.userId).then(res => {
            let {data} = res
            if (data.status === 200){
              user = data.data.user;
              switch (user.userType) {
                case "1":
                  // 获取单次使用 套餐信息
                  this.vipType = '1'
                  this.getVipInfo(1)
                  this.getPayImg(1)
                  break
                case "2":
                  this.getPayImg(2)
                  break
                case "3": //判断会员是否到期
                  this.getPayImg(2)
                  break
              }
            }
          })
        } else if(type === 3){ //支付成功 获取用户信息
          if (this.payResult.goodsCode == 'INVOICE_PAY_SINGLE'){ //单次购买
            this.payResult.desc = "购买" + "<span style='color: #FF5600;'>" + this.payResult.goodsName + "</span>" + "成功，您有一次使用机会"
          } else {
            commonApi.findUser(user.userId).then(res => {
              let {data} = res
              if (data.status === 200) {
                user = data.data.user;
                this.payResult.desc = "购买" + "<span style='color: #FF5600;'>" + this.payResult.goodsName + "</span>" + "成功，会员"+user.dueTime+"到期"
              }
            })
            setTimeout(()=>{
              this.payResult.show = true
            },500)
          }
        }else { //离开更新用户信息
          user = sessionStorage.getItem("user");
          user = JSON.parse(user);
          commonApi.findUser(user.userId).then(res => {
            let {data} = res
            if (data.status === 200){
              sessionStorage.setItem("user", JSON.stringify(data.data.user)); // session存储用户信息
              sessionStorage.setItem("mailbox", JSON.stringify(data.data.mailbox)); // session存储邮箱信息
            }
          })
        }
      },
      getVipInfo(type){ // 获取vip套餐信息
        commonApi.getVipInfo(type).then(res => {
          let {data} = res
          if (data.status === 200){
            if (data.data != null && data.data != ''){
              if (type == 1){
                let single = data.data.vipInfo
                this.singleInfo = single
                if (single.length > 0){
                  this.payPrice = single[0].vipPrice
                }
              } else {
                let vip = data.data.vipInfo
                this.vipInfo = vip
                if (this.vipType == 2 && vip.length > 0){
                  this.payPrice = vip[0].vipPrice
                }
              }
              setTimeout(()=>{
                this.fullscreenLoading = false
              },200)
              // this.explainInfo = data.data.explainInfo
            }
          }
        })
      },
      initWebSocket(){ //初始化weosocket
        const wsuri = this.websockUrl
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        // let actions = {"test":"12345"};
        // this.websocketsend(JSON.stringify(actions));
        this.payImgLoading = false
        console.log("连接成功。。。。。")
      },
      websocketonerror(){//连接建立失败重连
        // this.initWebSocket();
        console.log('连接建立失败');
      },
      websocketonmessage(e){ //数据接收
        // console.log("接收到数据："+e.data)
        let res = e.data
        if (res.length > 10) {
          this.findOrderInfo(res)
          this.$emit('reloadUser'); // 刷新父组件信息
        }
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        if (this.currentPage){
          console.log('断开连接。。。。。');
          this.payImgLoading = true
          this.initWebSocket()
        }
        // this.$emit('reload','second');
      },
      findOrderInfo(orderNo){ //查询订单详情
        const params = {orderNo: orderNo}
        commonApi.findOrder(params).then(res => {
          let {data} = res;
          if (data.status === 200) {
            this.payResult.amount = data.data.orderAmount
            this.payResult.orderNo = orderNo
            this.payResult.goodsName = data.data.goodsName
            this.payResult.goodsCode = data.data.goodsCode
            var user = sessionStorage.getItem("user");
            user = JSON.parse(user);
            this.findUserInfo(3,user);
          }
        }).catch(() =>{
          window.location.reload()
        })
      },
      judeImg(img){
        if (img.indexOf("http") != -1){ //自身的图片
          return false
        } else {
          return true
        }
      },
    }
  };
</script>

<style scoped lang="scss">
  @import "../../assets/css/them";
  @media screen and (max-width: 1200px){
    .active-content{
      /*vip套餐选项卡*/
      .vip-package{
        width: 600px;
        display: flex;
        margin: 0 auto;
        .vip-a{
          display: inline-block;
          margin: 0 25px;
          text-align: center;
          .vip-p.vip-on{
            border: 1px solid #FF5600;
          }
          .vip-p{
            margin: 0 auto;
            width: 100px;
            height: 100%;
            border:1px solid $borderColor;
            border-radius:3px;
            .price-info{
              margin: 0 10px;
              padding: 6px 0;
              .price{display: inline-block;padding-right: 5px;color: #FF5600;font-size: 18px;font-weight: 600}
              .price-unit{display: inline-block;padding-right:1px;color: #FF5600;font-weight: 600;font-size: 10px;}
            }
            .package-name{
              color: #333333;
              font-size: 14px;
              font-weight: 600;
              padding: 10px 10px 0 10px;
            }
            .package-remake{
              padding: 10px 10px 0 10px;
              height: 40px;
              color: #999999;
              font-size: 12px;
              font-weight:400;
            }
            .el-icon-my-vip-choose{
              position: absolute;
              margin-top: -14px;
              margin-left: 32px;
              width: 18px;
              background: url("../../assets/img/choose@2x.png") center no-repeat;
              background-size: 18px;
              line-height: 18px;
            }
            .el-icon-my-vip-choose.icon-hide{
              visibility: hidden;
            }
            .el-icon-my-vip-choose:before {
              content: "替";
              visibility: hidden;
            }
          }
        }
      }
      /*支付方式选择卡*/
      .pay-type{
        position: relative;
        width: 80%;
        min-width: 500px;
        margin-left: 5%;
        margin-top: 40px;
        border: 1px solid $borderColor;
        border-radius: 15px;
        .payTypeTba{
          /deep/ .el-tabs__header.is-left{
            margin-top: 0;
            box-shadow: none;
            height: 100%;
            width: 130px;
            .el-tabs__nav.is-left{
              margin-top: 0;
              height: 100%;
              .el-tabs__active-bar{
                background: $globalColor;
              }
              .el-tabs__item{
                padding: 10px;
                text-align: center;
                height: 50%;
                line-height: 80px;
                border-right: 1px solid $borderColor;
                /*支付标题*/
                .pay-type-title{
                  text-align: left;
                  margin-left: 5%;
                  span{
                    padding-left: 10px;
                  }
                  .el-icon-pay-wechat{
                    background: url("../../assets/img/weixin@2x.png") center no-repeat;
                    background-size: 24px;
                    width: 24px;
                    line-height: 24px;
                  }
                  .el-icon-pay-wechat:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-pay-ali{
                    background: url("../../assets/img/zhifubao@2x.png") center no-repeat;
                    background-size: 24px;
                    width: 24px;
                    line-height: 24px;
                  }
                  .el-icon-pay-ali:before {
                    content: "替";
                    visibility: hidden;
                  }
                }
              }
              .el-tabs__item:last-child{
                border-top: 1px solid $borderColor;
              }
            }
          }
          /deep/ .el-tabs__content{
            padding-left: 130px;
            /*支付二维码以及用户信息*/
            .pay-qr{
              height: 180px;
              width: 100%;
              .qr-code{
                margin: 20px 0;
                padding-left: 2%;
                text-align: center;
                float: left;
                .qr-code-info{
                  .qr-code-bor{
                    width: 140px;
                    height: 140px;
                    border: 1px solid $baseColor;
                    .qr-code-img{
                      padding: 10px;
                      img{
                        width: 100%;
                      }
                    }
                  }
                  .qr-code-text{
                    font-size: 14px;
                    font-weight: 600;
                    padding-top: 15px;
                  }
                }
              }
              .pay-info{
                text-align: left;
                float: left;
                padding-top: 60px;
                padding-left: 10px;
                .pay-price{
                  color: #FF5600;
                  font-weight: bold;
                  font-size: 18px;
                }
                .pay-user{
                  margin-top: 15px;
                  color: #999999;
                }
              }
            }
          }

        }
        .pay-result{
          height: 180px;
          .result-title{
            width: 120px;
            text-align: center;
            margin-left: 15px;
            float: left;
            img{
              width: 42px;
              height: 42px;
              margin-top: 45px;
            }
            .result-title-text{
              font-size: 22px;
              font-weight: 500;
              color:rgba(51,51,51,1);
              line-height:50px;
            }
          }
        }
        .result-content{
          float: left;
          margin-top: 45px;
          margin-left: 10px;
          .result-content-text{
            font-size:14px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height: 30px;
          }
        }
      }
      /*vip购买权限图标*/
      .pay-vip-desc{
        background: #F7F7FA;
        padding: 10px 0;
        margin-top: 30px;
        margin-bottom: 10px;
        width: 80%;
        margin-left: 5%;
        .vip-desc-sp1{
          margin-left: 30px;
        }
        .vip-desc-sp2 {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          margin-left: 12px;
          .el-icon-my-vip-desc{
            width: 20px;
            background: url("../../assets/img/dagou@2x.png") center no-repeat;
            background-size: 14px;
            line-height: 2;
            margin-right: 10px;
          }
          .el-icon-my-vip-desc:before {
            content: "替";
            visibility: hidden;
          }
        }
      }
      /*vip说明*/
      .vip_explain{
        padding: 10px 12px;
        color: #333333;
        font-size: 14px;
        font-weight: 600;
        background: $baseBgColor;
        .vip-desc-sp1{
          margin-left: 30px;
        }
        .vip-desc-sp2 {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          margin-left: 20px;
        }
      }
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1600px){
    .active-content{
      /*vip套餐选项卡*/
      .vip-package{
        width: 600px;
        display: flex;
        margin: 0 auto;
        .vip-a{
          display: inline-block;
          margin: 0 25px;
          text-align: center;
          .vip-p.vip-on{
            border: 1px solid #FF5600;
          }
          .vip-p{
            margin: 0 auto;
            width: 100px;
            height: 100%;
            border:1px solid $borderColor;
            border-radius:3px;
            .price-info{
              margin: 0 10px;
              padding: 6px 0;
              .price{display: inline-block;padding-right: 5px;color: #FF5600;font-size: 18px;font-weight: 600}
              .price-unit{display: inline-block;padding-right:1px;color: #FF5600;font-weight: 600;font-size: 10px;}
            }
            .package-name{
              color: #333333;
              font-size: 14px;
              font-weight: 600;
              padding: 10px 10px 0 10px;
            }
            .package-remake{
              padding: 10px 10px 0 10px;
              height: 40px;
              color: #999999;
              font-size: 12px;
              font-weight:400;
            }
            .el-icon-my-vip-choose{
              position: absolute;
              margin-top: -14px;
              margin-left: 32px;
              width: 18px;
              background: url("../../assets/img/choose@2x.png") center no-repeat;
              background-size: 18px;
              line-height: 18px;
            }
            .el-icon-my-vip-choose.icon-hide{
              visibility: hidden;
            }
            .el-icon-my-vip-choose:before {
              content: "替";
              visibility: hidden;
            }
          }
        }
      }
      /*支付方式选择卡*/
      .pay-type{
        position: relative;
        width: 80%;
        min-width: 500px;
        margin-left: 5%;
        margin-top: 40px;
        border: 1px solid $borderColor;
        border-radius: 15px;
        .payTypeTba{
          /deep/ .el-tabs__header.is-left{
            margin-top: 0;
            box-shadow: none;
            height: 100%;
            width: 160px;
            .el-tabs__nav.is-left{
              margin-top: 0;
              height: 100%;
              .el-tabs__active-bar{
                background: $globalColor;
              }
              .el-tabs__item{
                padding: 10px;
                text-align: center;
                height: 50%;
                line-height: 80px;
                border-right: 1px solid $borderColor;
                /*支付标题*/
                .pay-type-title{
                  text-align: left;
                  margin-left: 12%;
                  span{
                    padding-left: 10px;
                  }
                  .el-icon-pay-wechat{
                    background: url("../../assets/img/weixin@2x.png") center no-repeat;
                    background-size: 24px;
                    width: 24px;
                    line-height: 24px;
                  }
                  .el-icon-pay-wechat:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-pay-ali{
                    background: url("../../assets/img/zhifubao@2x.png") center no-repeat;
                    background-size: 24px;
                    width: 24px;
                    line-height: 24px;
                  }
                  .el-icon-pay-ali:before {
                    content: "替";
                    visibility: hidden;
                  }
                }
              }
              .el-tabs__item:last-child{
                border-top: 1px solid $borderColor;
              }
            }
          }
          /deep/ .el-tabs__content{
            padding-left: 160px;
            /*支付二维码以及用户信息*/
            .pay-qr{
              height: 180px;
              width: 100%;
              .qr-code{
                margin: 20px 0;
                padding-left: 15%;
                text-align: center;
                float: left;
                .qr-code-info{
                  .qr-code-bor{
                    width: 140px;
                    height: 140px;
                    border: 1px solid $baseColor;
                    .qr-code-img{
                      padding: 10px;
                      img{
                        width: 100%;
                      }
                    }
                  }
                  .qr-code-text{
                    font-size: 14px;
                    font-weight: 600;
                    padding-top: 15px;
                  }
                }
              }
              .pay-info{
                text-align: left;
                float: left;
                padding-top: 60px;
                padding-left: 20px;
                .pay-price{
                  color: #FF5600;
                  font-weight: bold;
                  font-size: 18px;
                }
                .pay-user{
                  margin-top: 15px;
                  color: #999999;
                }
              }
            }
          }

        }
        .pay-result{
          height: 180px;
          .result-title{
            width: 120px;
            text-align: center;
            margin-left: 50px;
            float: left;
            img{
              width: 64px;
              height: 64px;
              margin-top: 30px;
            }
            .result-title-text{
              font-size: 30px;
              font-weight: 500;
              color:rgba(51,51,51,1);
              line-height:50px;
            }
          }
        }
        .result-content{
          float: left;
          margin-top: 50px;
          margin-left: 50px;
          .result-content-text{
            font-size:16px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height: 30px;
          }
        }
      }
      /*vip购买权限图标*/
      .pay-vip-desc{
        background: #F7F7FA;
        padding: 10px 0;
        margin-top: 50px;
        margin-bottom: 10px;
        margin-left: 5%;
        width: 80%;
        .vip-desc-sp1{
          margin-left: 30px;
        }
        .vip-desc-sp2 {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          margin-left: 35px;
          .el-icon-my-vip-desc{
            width: 20px;
            background: url("../../assets/img/dagou@2x.png") center no-repeat;
            background-size: 14px;
            line-height: 2;
            margin-right: 10px;
          }
          .el-icon-my-vip-desc:before {
            content: "替";
            visibility: hidden;
          }
        }
      }
      /*vip说明*/
      .vip_explain{
        padding: 10px 12px;
        color: #333333;
        font-size: 14px;
        font-weight: 600;
        background: $baseBgColor;
        .vip-desc-sp1{
          margin-left: 30px;
        }
        .vip-desc-sp2 {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          margin-left: 20px;
        }
      }
    }
  }
  @media screen and (min-width: 1600px){
    .active-content{
      .vip-package{
        width: 930px;
        display: flex;
        margin: 0 auto;
        .vip-a{
          display: inline-block;
          margin: 0 50px;
          text-align: center;
          .vip-p.vip-on{
            border: 1px solid #FF5600;
          }
          .vip-p{
            margin: 0 auto;
            width: 130px;
            height: 100%;
            border:1px solid $borderColor;
            border-radius:3px;
            .price-info{
              margin: 0 20px;
              padding: 10px 0;
              .price{display: inline-block;padding-right: 5px;color: #FF5600;font-size: 24px;font-weight: 600}
              .price-unit{display: inline-block;padding-right:1px;color: #FF5600;font-weight: 600;font-size: 10px;}
            }
            .package-name{
              color: #333333;
              font-size: 18px;
              font-weight: 600;
              padding: 20px 10px 0 10px;
            }
            .package-remake{
              padding: 20px 10px 0 10px;
              height: 60px;
              color: #999999;
              font-size:16px;
              font-weight:400;
            }
            .el-icon-my-vip-choose{
              position: absolute;
              margin-top: -22px;
              margin-left: 41px;
              width: 25px;
              background: url("../../assets/img/choose@2x.png") center no-repeat;
              background-size: 25px;
              line-height: 2;
            }
            .el-icon-my-vip-choose.icon-hide{
              visibility: hidden;
            }
            .el-icon-my-vip-choose:before {
              content: "替";
              visibility: hidden;
            }
          }
        }
      }
      .pay-type{
        position: relative;
        width: 80%;
        min-width: 500px;
        margin-left: 5%;
        margin-top: 50px;
        border: 1px solid $borderColor;
        border-radius: 15px;
        .payTypeTba{
          /deep/ .el-tabs__header.is-left{
            margin-top: 0;
            box-shadow: none;
            height: 100%;
            width: 200px;
            .el-tabs__nav.is-left{
              margin-top: 0;
              height: 100%;
              .el-tabs__active-bar{
                background: $globalColor;
              }
              .el-tabs__item{
                padding: 10px;
                text-align: center;
                height: 50%;
                line-height: 80px;
                border-right: 1px solid $borderColor;
                /*支付标题*/
                .pay-type-title{
                  text-align: left;
                  margin-left: 22%;
                  span{
                    padding-left: 10px;
                  }
                  .el-icon-pay-wechat{
                    background: url("../../assets/img/weixin@2x.png") center no-repeat;
                    background-size: 24px;
                    width: 24px;
                    line-height: 24px;
                  }
                  .el-icon-pay-wechat:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-pay-ali{
                    background: url("../../assets/img/zhifubao@2x.png") center no-repeat;
                    background-size: 24px;
                    width: 24px;
                    line-height: 24px;
                  }
                  .el-icon-pay-ali:before {
                    content: "替";
                    visibility: hidden;
                  }
                }
              }
              .el-tabs__item:last-child{
                border-top: 1px solid $borderColor;
              }
            }
          }
          /deep/ .el-tabs__content{
            padding-left: 200px;
            /*支付二维码以及用户信息*/
            .pay-qr{
              height: 180px;
              width: 100%;
              .qr-code{
                margin: 20px 0;
                padding-left: 20%;
                text-align: center;
                float: left;
                .qr-code-info{
                  .qr-code-bor{
                    width: 140px;
                    height: 140px;
                    border: 1px solid $baseColor;
                    .qr-code-img{
                      padding: 10px;
                      img{
                        width: 100%;
                      }
                    }
                  }
                  .qr-code-text{
                    font-size: 14px;
                    font-weight: 600;
                    padding-top: 15px;
                  }
                }
              }
              .pay-info{
                text-align: left;
                float: left;
                padding-top: 60px;
                padding-left: 20px;
                .pay-price{
                  color: #FF5600;
                  font-weight: bold;
                  font-size: 18px;
                }
                .pay-user{
                  margin-top: 15px;
                  color: #999999;
                }
              }
            }
          }

        }
        .pay-result{
          height: 180px;
          .result-title{
            width: 120px;
            text-align: center;
            margin-left: 100px;
            float: left;
            img{
              width: 64px;
              height: 64px;
              margin-top: 30px;
            }
            .result-title-text{
              font-size: 30px;
              font-weight: 500;
              color:rgba(51,51,51,1);
              line-height:50px;
            }
          }
        }
        .result-content{
          float: left;
          margin-top: 50px;
          margin-left: 100px;
          .result-content-text{
            font-size:16px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height: 30px;
          }
        }
      }
      .pay-vip-desc{
        background: #F7F7FA;
        padding: 10px 0;
        margin-top: 80px;
        margin-bottom: 10px;
        margin-left: 5%;
        width: 80%;
        .vip-desc-sp1{
          margin-left: 30px;
        }
        .vip-desc-sp2 {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          margin-left: 50px;
          .el-icon-my-vip-desc{
            width: 20px;
            background: url("../../assets/img/dagou@2x.png") center no-repeat;
            background-size: 14px;
            line-height: 2;
            margin-right: 10px;
          }
          .el-icon-my-vip-desc:before {
            content: "替";
            visibility: hidden;
          }
        }
      }
      .vip_explain{
        padding: 10px 12px;
        color: #333333;
        font-size: 14px;
        font-weight: 600;
        background: $baseBgColor;
        .vip-desc-sp1{
          margin-left: 30px;
        }
        .vip-desc-sp2 {
          font-weight: 400;
          font-size: 12px;
          color: #333333;
          margin-left: 20px;
        }
      }
    }
  }

</style>
